<template>
  <div class="my-goods-list">
    <MyTable :list="list">
      <template #header>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <template #body="scope">
        <td>{{ scope.row.id }}</td>
        <td>{{ scope.row.goods_name }}</td>
        <td>{{ scope.row.goods_price }}</td>
        <td>
          <input
            class="tag-input form-control"
            style="width: 100px"
            type="text"
            v-if="scope.row.inputVisible"
            v-foc
            @blur="scope.row.inputVisible = false"
            v-model.trim="scope.row.inputValue"
            @keydown.enter="addTag(scope.row)"
            @keydown.esc="scope.row.inputValue = ''"
          />
          <button
            style="display: block"
            class="btn btn-primary btn-sm add-tag"
            v-else
            @click="scope.row.inputVisible = true"
          >
            +Tag
          </button>
          <span
            class="badge bg-warning text-dark"
            v-for="(item, index) in scope.row.tags"
            :key="index"
          >
            {{ item }}
          </span>
        </td>
        <td>
          <button class="btn btn-danger btn-sm" @click="del(scope.row.id)">
            删除
          </button>
        </td>
      </template>
    </MyTable>

    <MyTable :list="list">
      <template #header>
        <th>编号</th>
        <th>物品名称</th>
        <th>金钱</th>
        <th>Tag</th>
        <th>操作</th>
        <th>操作</th>
        <th>操作</th>
        <th>操作</th>
      </template>
      <template #body="scope">
        <td>{{ scope.row.id }}</td>
        <td>{{ scope.row.goods_name }}</td>
        <td>{{ scope.row.goods_price }}</td>
        <td>{{ scope.row.tags }}</td>
        <td>
          <button class="btn btn-danger btn-sm">删除</button>
        </td>
        <td>
          <button class="btn btn-danger btn-sm">添加</button>
        </td>
        <td>
          <button class="btn btn-danger btn-sm">删除</button>
        </td>
        <td>
          <button class="btn btn-danger btn-sm">删除</button>
        </td>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from "../components/MyTable.vue";

// 目标1: 渲染数据
// 1.1 MyTable 静态页面从笔记中复制过来
// 1.2 在 GoodsList 组件中发请求获取数据
// 1.3 将获取到的数据传递给 MyTable 中进行渲染
// 1.4 在 MyTable 中渲染数据
// 1.5 给删除按钮加 bootstrap 的样式

// 目标2: 使用插槽, 让 MyTable 组件更灵活
// 2.1 在 MyTable 中使用 slot 占位, 并设置 name 属性
// 2.2 在 GoodsList 中传入自定义的标签 template 结合 v-slot 指令
// 2.3 表体的数据需要传给 GoodsList 使用, 所以需要使用作用域插槽, 在 MyTable 中绑定数据给 slot 标签, 在 GoodsList 的 template 中使用 v-slot 接收

// 目标3: 动态渲染标签
// 3.1 在使用插槽时, v-for 动态渲染 span
// 3.2 bootstrap v4 和 v5 版本不同类名不同, 具体查阅官网

// 目标4: 删除数据
// 4.1 在 GoodsList 使用插槽时绑定点击事件
// 4.2 给事件处理函数传入 id 作用域插槽
// 4.3 根据 id 删除 list 中的数据

// 目标5: 添加 tag
// 5.1 使用 v-if 绑定数据的 inputVisible
// 5.2 给按钮绑定点击事件, 修改 inputVisible 为 true
// 5.3 自动聚焦: $nextTick 或 自定义指令
// 5.4 给 input 绑定 keydown 事件, 使用事件修饰符 .enter
// 5.5 传入 scope.row 对象, 方便在事件处理函数中操作数据
// 5.6 非空校验, 添加数据
// 5.7 绑定 keydown 事件, 使用事件修饰符 .esc 修饰, 清空数据

export default {
  components: {
    MyTable,
  },

  directives: {
    foc: {
      // 当元素插入页面时触发
      inserted(el) {
        el.focus()
      }
    }
  },

  data() {
    return {
      list: [],
    };
  },

  async created() {
    // 发送请求获取数据
    let res = await this.$axios({
      url: "https://www.escook.cn/api/goods",
    });

    // console.log(res.data.data)
    this.list = res.data.data;
  },

  methods: {
    del(id) {
      let index = this.list.findIndex((item) => item.id == id);
      this.list.splice(index, 1);
    },
    addTag(row) {
      if (row.inputValue.length === 0) return alert('不能为空') 

      row.tags.push(row.inputValue)

      row.inputValue = ''
    }
  },
};
</script>

<style lang="scss" scoped>
</style>